<template>
  <div class="channel-edit">
    <div class="channel-wrap">
      <div class="title">
        <span>我的频道</span>
        <van-button
          plain
          type="danger"
          size="mini"
          class="but"
          @click="isEdit = !isEdit"
          >{{ !isEdit ? "编辑" : "取消" }}</van-button
        >
      </div>

      <van-grid>
        <van-grid-item v-for="(item, index) in ownChannels" :key="item.id">
          <van-icon
            name="cross"
            size="10px"
            v-if="isEdit && index"
            @click="iconDel(index, item)"
          />
          <span
            :class="{ active: index == value }"
            @click="intoChannel(index)"
            >{{ item.name }}</span
          >
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 可选频道 -->
    <div class="channel-wrap">
      <div class="title">
        <span>可选频道</span>
      </div>
      <van-grid>
        <van-grid-item
          v-for="item in optionalChannel"
          :key="item.id"
          :text="item.name"
          @click="addChannel(item)"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { channelAPI,delChannelAPI } from "@/api";
import { setChannel } from '@/utils/storage'
// ,delChannelAPI
export default {
  name: "channelEdit",
  props: {
    // 接受父组件传来的自己有  我的频道
    ownChannels: {
      type: Array,
      //   限制必填和类型为数组
      required: true,
    },
    // 所有频道
    allchannels: {
      type: Array,
      required: true,
    },
    value: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      isEdit: false,
    };
  },
  computed: {
    //   可选频道
    optionalChannel() {
      // 首先遍历所有频道  如果 return true 就过滤到一个新数组
      let res = this.allchannels.filter((value) => {
        //    findIndex来判断。有为true 没有为-1
        let index = this.ownChannels.findIndex((v) => {
          //判断我的频道和所有频道有哪些不存在
          if (v.id == value.id) {
            return true;
          }
        });
        if (index == -1) {
          return true;
        } else {
          return false;
        }
      });
      return res;
    },
  },
  methods: {
    intoChannel(index) {
      this.$emit("input", index);
    },
    //   新增频道
    async addChannel(item) {
      this.ownChannels.push(item);
      // 首先判断是否有token
      if (this.$store.state.tokenObj.token) {
        // 有token登录成功,就发起   设置用户的频道（部分覆盖）
       await channelAPI({
          channels: [{ id: item.id, seq: this.ownChannels.length + 1 }],
        });
        // console.log(res);
      } else {
        // 没有token，就存在本地存储
        setChannel(this.ownChannels);

        
        
      }
    },





    //   取消频道
   async iconDel(index, item) {
      //  console.log(item);

      // 从我的频道删除
      this.ownChannels.splice(index, 1);

      // 判断删除的是不是当前元素的前面
      if (index < this.value) {
        this.$emit("input", this.value - 1);
      }

      // 首先判断是否有token
      if (this.$store.state.tokenObj.token) {
        // console.log(item.id);
        // 有token登录成功,就发起   设置用户的频道（部分覆盖）
      let res= await delChannelAPI(item.id);
        console.log(res);
        // this.ownChannels.push(res.)
      } else {
      // 没有token，就存在本地存储
      setChannel(this.ownChannels)

      }
    },
  },
};
</script>

<style lang='less' scoped>
.channel-wrap {
  padding: 20px;
  .title {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .van-grid-item__content {
    width: 80%;
    .van-icon-cross {
      position: absolute;
      top: 5px;
      right: 5px;
    }
  }
}
.active {
  color: red;
}
</style>